<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>安平通行码</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<style>
    body{
		max-width: 450px;
		margin: auto;
		padding: 0;
		font-size: 12px;
	}
	li, ul {
	    padding: 0;
	    margin: 0;
	    list-style: none;
	}
	.content{
		padding: 16px 15px;
	}
	.box1{
		width: 100%;
		height: 153px;
		box-shadow: 0 0 32px 0 rgba(0,0,0,0.08);
		border-radius: 12px;
	}
	.box1 .top{
		height: 69px;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.box1 .top .l{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 16px 15px;
	}
	.box1 .top .l span{
		font-size: 17px;
		color: #FFFFFF;
	}
	.box1 .top .l label{
		color: #FFFFFF;
	}
	.box1 .top .r{
		padding: 16px 15px;
	}
	.box1 .top .r img{
		height: 12px;
	}
	.box1 .foot{
		height: 84px;
		text-align: center;
		line-height: 84px;
		font-size: 28px;
	}
	.time_box{
		margin-top: 25px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.time_box span{font-size: 17px;line-height: 17px;}
	.layui-input{width: 35%;height: 26px;border: 1px solid #979797; border-radius: 4px;}
	.link-top {
        width: 20px;
        height: 1px;
        border-top: solid #ACC0D8 1px;    
	}

	.bg{
		background-image: linear-gradient(269deg, #3DBDFF 1%, #008DD5 100%);
	}
	.bg1{
		background-image: linear-gradient(270deg, #FDC392 0%, #FF8E5D 100%);
	}
	.bg2{
		background-image: linear-gradient(270deg, #FF9494 0%, #FF6767 100%);
	}
	.mt{margin-top: 16px;}
</style>

<body>
    <div class="content">
		<div class="box1">
			<div class="top bg">
				<div class="l">
					<span>本场所内部注册人数</span>
					<label id="createDate"></label>
				</div>
				<div class="r">
					<img src="https://ymt-1301608028.cos.ap-beijing.myqcloud.com/images/arrow.png" />
				</div>
			</div>
			<div class="foot" id="peopleRegister">
				0
			</div>
		</div>
		<div class="time_box">
			<span>时间</span>
			<input type="text" class="layui-input" id="startDate" readonly value="">
			<div class="link-top"></div>
			<input type="text" class="layui-input" id="endDate" readonly value="">
		</div>
		<div class="box1 mt">
			<div class="top bg1">
				<div class="l">
					<span>本场所内部登记人次</span>
					<label id="date1"></label>
				</div>
				<div class="r">
					<img src="https://ymt-1301608028.cos.ap-beijing.myqcloud.com/images/arrow.png" />
				</div>
			</div>
			<div class="foot" id="neibu">
				0
			</div>
		</div>
		
		<div class="box1 mt">
			<div class="top bg2">
				<div class="l">
					<span>访客登记人次</span>
					<label id="date2"></label>
				</div>
				<div class="r">
					<img src="https://ymt-1301608028.cos.ap-beijing.myqcloud.com/images/arrow.png" />
				</div>
			</div>
			<div class="foot" id="fangke">
				0
			</div>
		</div>
		
	</div>
    <script src="layui/layui.js" charset="utf-8"></script>
	<script src="http://www.internetke.com/jsEffects/2018040409/js/jquery-1.11.0.min.js" charset="utf-8"></script>
	<script src="http://www.internetke.com/jsEffects/2018040409/js/TweenLite.min.js" charset="utf-8"></script>
	<script src="http://www.internetke.com/jsEffects/2018040409/js/lem_counter.js" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'jquery', 'laydate'], function () {
            var layer = layui.layer,
                $ = layui.jquery,
				laydate = layui.laydate;
			
            $(document).ready(function () {
				
				var loadIndex;
				$.ajax({
				    url: 'http://beyy3y9w.dongtaiyuming.net/codeGeneration/peopleRegister',
				    data: {id:620,type:3},
				    type: "post",
				    beforeSend: function () {
				        // 点击后阴影效果
				        loadIndex = layer.load(1, {
				            shade: [0.3, 'rgb(0, 0, 0)']
				        })
				    },
				    success: function (res) {
				        // alert(JSON.stringify(res))
						console.log(res)
						// 成功
				        if (res.code == 0) {
							$('#createDate').html('场所码开通时间：'+res.data.createTime);
							$('#date1').html('截止时间：'+res.data.yesterdayTime+' —— '+res.data.yesterdayTime);
							$('#date2').html('截止时间：'+res.data.yesterdayTime+' —— '+res.data.yesterdayTime);
							$('#startDate').val(res.data.yesterdayTime);
							$('#endDate').val(res.data.yesterdayTime);
							var startDate = laydate.render({
							    elem: '#startDate', //指定元素
								theme: '#265DA4',
								min: res.data.createTime,
								max: -1,
								showBottom: false,
								done: function(value, date){
									endDate.config.min ={
										year:date.year,
										month:date.month-1,
										date: date.date,
										hours: 0,
										minutes: 0,
										seconds : 0
									};
									var startTime = value;
									var endTime = $('#endDate').val();
									console.log('起始日期:'+startTime)
									console.log('结束日期:'+endTime)
									getResult(620,3,startTime,endTime);
								}
							});
							var endDate = laydate.render({
							    elem: '#endDate', //指定元素
								theme: '#265DA4',
								min: res.data.createTime,
								max: -1,
								showBottom: false,
								done: function(value, date){
									startDate.config.max={
										year:date.year,
										month:date.month-1,//注意是month-1，写在date上的话你后边的日期选择不了
										date: date.date,
										hours: 0,
										minutes: 0,
										seconds : 0
									};
									var startTime = $('#startDate').val();
									var endTime = value;
									console.log('起始日期:'+startTime)
									console.log('结束日期:'+endTime)
									getResult(620,3,startTime,endTime);
								}
							});
							$('#peopleRegister').lemCounter({
								value_to: res.data.count,
								value_from: 0,
								animate_duration:1
							});
							$('#neibu').lemCounter({
								value_to: res.data.neibu,
								value_from: 0,
								animate_duration:1
							});
							$('#fangke').lemCounter({
								value_to: res.data.fangke,
								value_from: 0,
								animate_duration:1
							});
				        } else {
				            layer.msg(res.msg, {
				                icon: 2
				            });
				        }
				    },
				    error: function () {
				        layer.msg('系统维护更新中，请稍后...', {
				            icon: 2
				        });
				    },
				    complete: function () {
				        layer.close(loadIndex);
				    }
				});
            });
			window.getResult = function(id,type,startTime,endTime){
				//console.log(id)
				//console.log(type)
				//console.log(startTime)
				//console.log(endTime)
				var loadIndex;
				$.ajax({
				    url: 'http://beyy3y9w.dongtaiyuming.net/codeGeneration/peopleLogin',
				    data: {id:id,type:type,startTime:startTime,endTime:endTime},
				    type: "post",
				    beforeSend: function () {
				        // 点击后阴影效果
				        loadIndex = layer.load(1, {
				            shade: [0.3, 'rgb(0, 0, 0)']
				        })
				    },
				    success: function (res) {
				        // alert(JSON.stringify(res))
						//console.log(res)
						if(res.code == 0){
							$('#date1').html('截止时间：'+startTime+' —— '+endTime);
							$('#date2').html('截止时间：'+startTime+' —— '+endTime);
							$('#neibu').lemCounter({
								value_to: res.data.neibu,
								value_from: 0,
								animate_duration:1
							});
							$('#fangke').lemCounter({
								value_to: res.data.fangke,
								value_from: 0,
								animate_duration:1
							});
						}else{
							layer.msg(res.msg, {
							    icon: 2
							});
						}
				    },
				    error: function () {
				        layer.msg('系统维护更新中，请稍后...', {
				            icon: 2
				        });
				    },
				    complete: function () {
				        layer.close(loadIndex);
				    }
				});
			}
        });
    </script>

</body>

</html>